<template>
    <div class="userItem" v-for="userinfo in userlist" @contextmenu="e => onContextmenu(e, userinfo)"
        @click="addChatList(userinfo)">
        <div class="avatar">
            <img class="img" width="50" height="50" :src="Util.getImgUrl(userinfo.avatar)">
            <span :class="getStatusStyle(userinfo.status)"></span>
        </div>
        <div class="info">
            <div class="nikename">{{ userinfo.nickname }}</div>
            <div class="sign">{{ userinfo.signature }}</div>
        </div>
    </div>
    <div class="contextMenu" ref="contextMenu">
        <div v-for="item in contextMenuConfig" @click="contextMenuHandler(item.handlerName)">
            <span class="Icon">
                <span :class="getIconfontClass(item.icon)"></span>
            </span>
            {{ item.text }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { FriendInfo } from '@/Util/Constant';
import { useRouter, useRoute } from 'vue-router'
import chatModel from '@/ChatMocel'
import { Util, getUserInfo } from '@/Util';
import eventBus from '@/Util/EventBus';
import socket from '@/socket/UserChatSocket';
import Hlddz from '@/game/model/hlddz';
import { SocketDataType, SocketEventType } from '@/share/commonType';
import { ElMessage } from 'element-plus';
let { userlist } = defineProps<{
    userlist: FriendInfo[]
}>()
let userItemRef = ref()
let contextMenu = ref()
let contextMenuhandleUser: FriendInfo;
let flag = false
let userInfo = getUserInfo()
let timer;
const router = useRouter()
const route = useRoute()
let contextMenuConfig = ref([{
    text: '邀请好友一起游戏',
    handlerName: 'inviteFriend',
    icon: 'yaoqinghaoyou'
}, {
    text: '清空聊天记录',
    handlerName: 'clearChat',
    icon: 'qingkong'
}, {
    text: '删除好友',
    handlerName: 'deleteFriend',
    icon: 'shanchuhaoyou'
},
])
let getIconfontClass = (icon: string) => {
    return `iconfont icon-${icon}`
}
onMounted(() => {
    document.addEventListener('click', closeContextMenu)
})
onUnmounted(() => {
    document.removeEventListener('click', closeContextMenu)
})
let addChatList = (userinfo: FriendInfo) => {
    if (flag) {
        eventBus.emit('openChatPannel')
        chatModel.addChatList({
            name: userinfo.username,
            nickname: userinfo.nickname,
            avatar: userinfo.avatar,
        })
        chatModel.setCurrentChatfriend(userinfo.username)
    } else {
        flag = true
        let timer = setTimeout(() => {
            flag = false
            clearTimeout(timer)
        }, 300)
    }

}

const getStatusStyle = (status: boolean) => {
    return `status ${status ? 'online' : 'outline'}`
}
const onContextmenu = (e: MouseEvent, userinfo: FriendInfo) => {
    closeContextMenu()
    contextMenuhandleUser = toRaw(userinfo)
    e.preventDefault()//禁止弹出系统菜单栏
    let menu = contextMenu.value as HTMLDivElement
    let userItem = e.currentTarget as HTMLDivElement
    let list = userItem.parentElement
    let clientRect = list?.getBoundingClientRect() as DOMRect
    let itemWidth = 138 // 这里算不出来是因为现在是display: 'none'
    let itemHeight = 79
    let parentWidth = clientRect.width;
    // let parentHeight = clientRect.height;
    let left = e.pageX - clientRect.left
    let top = e.pageY - clientRect.top
    if (left + itemWidth > parentWidth) {
        left = parentWidth - itemWidth
    }
    // if (top + itemHeight > parentHeight) {
    //     top = parentHeight - itemHeight
    // }
    showContextMenu(left, top)
}
const showContextMenu = (left: number, top: number) => {
    let menu = contextMenu.value as HTMLDivElement
    menu.style.display = 'block'
    menu.style.left = left + 'px'
    menu.style.top = top + 'px'
}
const closeContextMenu = () => {
    let menu = contextMenu.value as HTMLDivElement
    menu.style.display = 'none'
}
let deleteFriend = () => {
    ElMessage({
        message: '该功能待开放中，敬请期待 ^_^',
        type: 'warning',
    })
}
let inviteFriend = () => {
    let model = Hlddz.getInstance()
    let routePath = route.path
    if (routePath !== '/home/game') {
        ElMessage({
            message: '当前未在游戏中',
            type: 'warning',
        })
        return
    }
    if (model) {
        // 判断当前用户是否在游戏中
        if (model.isIncluedPlayer(contextMenuhandleUser.username)) {
            ElMessage({
                message: '该用户已在当前游戏',
                type: 'warning',
            })
            return;
        }
        socket.emit({ // 发出邀请
            action: SocketEventType.DdzGame,
            dataType: SocketDataType.InviteFriend,
            data: {
                gameid: model.gameId,
                inviteUser: contextMenuhandleUser.username,
                sender: userInfo.username
            }
        })
    }
}
let clearChat = () => {
    ElMessage({
        message: '该功能待开放中，敬请期待 ^_^',
        type: 'warning',
    })
}
let contextMenuHandler = (handlerName: string) => {
    switch (handlerName) {
        case 'inviteFriend':
            inviteFriend()
            break;
        case 'clearChat':
            clearChat()
            break;
        case 'deleteFriend':
            deleteFriend()
            break;
        default:
            break;
    }
}
</script>


<style lang="less">
.userItem {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    transition: .1s;
    background-color: rgba(255, 255, 255, 0);
    user-select: none;

    .avatar {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
        cursor: default;

        .img {
            border-radius: 50%;
        }

        .status {
            position: absolute;
            right: 1px;
            bottom: 1px;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            border: 1px solid #fff;
        }

        .online {
            background-color: #08f075;
        }

        .outline {
            background-color: #9b9b9c;
        }
    }

    .info {
        cursor: default;

        .nikename {
            font-size: 18px;
            color: #fff;
            margin-bottom: 3px;
        }

        .sign {
            height: 20px;
            width: 50px;
            overflow: hidden;
            font-size: 12px;
            color: #fff;
        }
    }
}

.contextMenu {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f8fbfd;
    padding: 5px 0;
    display: none;
    z-index: 999;
    width: 138px;
    font-size: 12px;
    border-radius: 3px;

    &>div {
        height: 23px;
        padding: 0 5px;
        line-height: 23px;

        .Icon {
            display: inline-block;
            width: 25px;
            height: 23px;
            text-align: center;
        }

        &:hover {
            background-color: #e7eaec;
        }
    }
}
</style>

<style scoped>
.userItem {
    &:hover {
        background-color: rgba(255, 255, 255, .3);
    }
}
</style>